/*!!
 *  Canvas 2 Svg v1.0.19
 *  A low level canvas to SVG converter. Uses a mock canvas context to build an SVG document.
 *
 *  Licensed under the MIT license:
 *  http://www.opensource.org/licenses/mit-license.php
 *
 *  Author:
 *  Kerry Liu
 *
 *  Copyright (c) 2014 Gliffy Inc.
 */

;(function () {
  "use strict";

  var STYLES, ctx, CanvasGradient, CanvasPattern, namedEntities;

  //helper function to format a string
  function format(str, args) {
      var keys = Object.keys(args), i;
      for (i=0; i<keys.length; i++) {
          str = str.replace(new RegExp("\\{" + keys[i] + "\\}", "gi"), args[keys[i]]);
      }
      return str;
  }

  //helper function that generates a random string
  function randomString(holder) {
      var chars, randomstring, i;
      if (!holder) {
          throw new Error("cannot create a random attribute name for an undefined object");
      }
      chars = "ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz";
      randomstring = "";
      do {
          randomstring = "";
          for (i = 0; i < 12; i++) {
              randomstring += chars[Math.floor(Math.random() * chars.length)];
          }
      } while (holder[randomstring]);
      return randomstring;
  }

  //helper function to map named to numbered entities
  function createNamedToNumberedLookup(items, radix) {
      var i, entity, lookup = {}, base10, base16;
      items = items.split(',');
      radix = radix || 10;
      // Map from named to numbered entities.
      for (i = 0; i < items.length; i += 2) {
          entity = '&' + items[i + 1] + ';';
          base10 = parseInt(items[i], radix);
          lookup[entity] = '&#'+base10+';';
      }
      //FF and IE need to create a regex from hex values ie &nbsp; == \xa0
      lookup["\\xa0"] = '&#160;';
      return lookup;
  }

  //helper function to map canvas-textAlign to svg-textAnchor
  function getTextAnchor(textAlign) {
      //TODO: support rtl languages
      var mapping = {"left":"start", "right":"end", "center":"middle", "start":"start", "end":"end"};
      return mapping[textAlign] || mapping.start;
  }

  //helper function to map canvas-textBaseline to svg-dominantBaseline
  function getDominantBaseline(textBaseline) {
      //INFO: not supported in all browsers
      var mapping = {"alphabetic": "alphabetic", "hanging": "hanging", "top":"text-before-edge", "bottom":"text-after-edge", "middle":"central"};
      return mapping[textBaseline] || mapping.alphabetic;
  }

  // Unpack entities lookup where the numbers are in radix 32 to reduce the size
  // entity mapping courtesy of tinymce
  namedEntities = createNamedToNumberedLookup(
      '50,nbsp,51,iexcl,52,cent,53,pound,54,curren,55,yen,56,brvbar,57,sect,58,uml,59,copy,' +
          '5a,ordf,5b,laquo,5c,not,5d,shy,5e,reg,5f,macr,5g,deg,5h,plusmn,5i,sup2,5j,sup3,5k,acute,' +
          '5l,micro,5m,para,5n,middot,5o,cedil,5p,sup1,5q,ordm,5r,raquo,5s,frac14,5t,frac12,5u,frac34,' +
          '5v,iquest,60,Agrave,61,Aacute,62,Acirc,63,Atilde,64,Auml,65,Aring,66,AElig,67,Ccedil,' +
          '68,Egrave,69,Eacute,6a,Ecirc,6b,Euml,6c,Igrave,6d,Iacute,6e,Icirc,6f,Iuml,6g,ETH,6h,Ntilde,' +
          '6i,Ograve,6j,Oacute,6k,Ocirc,6l,Otilde,6m,Ouml,6n,times,6o,Oslash,6p,Ugrave,6q,Uacute,' +
          '6r,Ucirc,6s,Uuml,6t,Yacute,6u,THORN,6v,szlig,70,agrave,71,aacute,72,acirc,73,atilde,74,auml,' +
          '75,aring,76,aelig,77,ccedil,78,egrave,79,eacute,7a,ecirc,7b,euml,7c,igrave,7d,iacute,7e,icirc,' +
          '7f,iuml,7g,eth,7h,ntilde,7i,ograve,7j,oacute,7k,ocirc,7l,otilde,7m,ouml,7n,divide,7o,oslash,' +
          '7p,ugrave,7q,uacute,7r,ucirc,7s,uuml,7t,yacute,7u,thorn,7v,yuml,ci,fnof,sh,Alpha,si,Beta,' +
          'sj,Gamma,sk,Delta,sl,Epsilon,sm,Zeta,sn,Eta,so,Theta,sp,Iota,sq,Kappa,sr,Lambda,ss,Mu,' +
          'st,Nu,su,Xi,sv,Omicron,t0,Pi,t1,Rho,t3,Sigma,t4,Tau,t5,Upsilon,t6,Phi,t7,Chi,t8,Psi,' +
          't9,Omega,th,alpha,ti,beta,tj,gamma,tk,delta,tl,epsilon,tm,zeta,tn,eta,to,theta,tp,iota,' +
          'tq,kappa,tr,lambda,ts,mu,tt,nu,tu,xi,tv,omicron,u0,pi,u1,rho,u2,sigmaf,u3,sigma,u4,tau,' +
          'u5,upsilon,u6,phi,u7,chi,u8,psi,u9,omega,uh,thetasym,ui,upsih,um,piv,812,bull,816,hellip,' +
          '81i,prime,81j,Prime,81u,oline,824,frasl,88o,weierp,88h,image,88s,real,892,trade,89l,alefsym,' +
          '8cg,larr,8ch,uarr,8ci,rarr,8cj,darr,8ck,harr,8dl,crarr,8eg,lArr,8eh,uArr,8ei,rArr,8ej,dArr,' +
          '8ek,hArr,8g0,forall,8g2,part,8g3,exist,8g5,empty,8g7,nabla,8g8,isin,8g9,notin,8gb,ni,8gf,prod,' +
          '8gh,sum,8gi,minus,8gn,lowast,8gq,radic,8gt,prop,8gu,infin,8h0,ang,8h7,and,8h8,or,8h9,cap,8ha,cup,' +
          '8hb,int,8hk,there4,8hs,sim,8i5,cong,8i8,asymp,8j0,ne,8j1,equiv,8j4,le,8j5,ge,8k2,sub,8k3,sup,8k4,' +
          'nsub,8k6,sube,8k7,supe,8kl,oplus,8kn,otimes,8l5,perp,8m5,sdot,8o8,lceil,8o9,rceil,8oa,lfloor,8ob,' +
          'rfloor,8p9,lang,8pa,rang,9ea,loz,9j0,spades,9j3,clubs,9j5,hearts,9j6,diams,ai,OElig,aj,oelig,b0,' +
          'Scaron,b1,scaron,bo,Yuml,m6,circ,ms,tilde,802,ensp,803,emsp,809,thinsp,80c,zwnj,80d,zwj,80e,lrm,' +
          '80f,rlm,80j,ndash,80k,mdash,80o,lsquo,80p,rsquo,80q,sbquo,80s,ldquo,80t,rdquo,80u,bdquo,810,dagger,' +
          '811,Dagger,81g,permil,81p,lsaquo,81q,rsaquo,85c,euro', 32);


  //Some basic mappings for attributes and default values.
  STYLES = {
      "strokeStyle":{
          svgAttr : "stroke", //corresponding svg attribute
          canvas : "#000000", //canvas default
          svg : "none",       //svg default
          apply : "stroke"    //apply on stroke() or fill()
      },
      "fillStyle":{
          svgAttr : "fill",
          canvas : "#000000",
          svg : null, //svg default is black, but we need to special case this to handle canvas stroke without fill
          apply : "fill"
      },
      "lineCap":{
          svgAttr : "stroke-linecap",
          canvas : "butt",
          svg : "butt",
          apply : "stroke"
      },
      "lineJoin":{
          svgAttr : "stroke-linejoin",
          canvas : "miter",
          svg : "miter",
          apply : "stroke"
      },
      "miterLimit":{
          svgAttr : "stroke-miterlimit",
          canvas : 10,
          svg : 4,
          apply : "stroke"
      },
      "lineWidth":{
          svgAttr : "stroke-width",
          canvas : 1,
          svg : 1,
          apply : "stroke"
      },
      "globalAlpha": {
          svgAttr : "opacity",
          canvas : 1,
          svg : 1,
          apply :  "fill stroke"
      },
      "font":{
          //font converts to multiple svg attributes, there is custom logic for this
          canvas : "12px Arial"
      },
      "shadowColor":{
          canvas : "#000000"
      },
      "shadowOffsetX":{
          canvas : 0
      },
      "shadowOffsetY":{
          canvas : 0
      },
      "shadowBlur":{
          canvas : 0
      },
      "textAlign":{
          canvas : "start"
      },
      "textBaseline":{
          canvas : "alphabetic"
      },
      "lineDash" : {
          svgAttr : "stroke-dasharray",
          canvas : [],
          svg : null,
          apply : "stroke"
      }
  };

  /**
   *
   * @param gradientNode - reference to the gradient
   * @constructor
   */
  CanvasGradient = function (gradientNode, ctx) {
      this.__root = gradientNode;
      this.__ctx = ctx;
  };

  /**
   * Adds a color stop to the gradient root
   */
  CanvasGradient.prototype.addColorStop = function (offset, color) {
      var stop = this.__ctx.__createElement("stop"), regex, matches;
      stop.setAttribute("offset", offset);
      if (color.indexOf("rgba") !== -1) {
          //separate alpha value, since webkit can't handle it
          regex = /rgba\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d?\.?\d*)\s*\)/gi;
          matches = regex.exec(color);
          stop.setAttribute("stop-color", format("rgb({r},{g},{b})", {r:matches[1], g:matches[2], b:matches[3]}));
          stop.setAttribute("stop-opacity", matches[4]);
      } else {
          stop.setAttribute("stop-color", color);
      }
      this.__root.appendChild(stop);
  };

  CanvasPattern = function (pattern, ctx) {
      this.__root = pattern;
      this.__ctx = ctx;
  };

  /**
   * The mock canvas context
   * @param o - options include:
   * ctx - existing Context2D to wrap around
   * width - width of your canvas (defaults to 500)
   * height - height of your canvas (defaults to 500)
   * enableMirroring - enables canvas mirroring (get image data) (defaults to false)
   * document - the document object (defaults to the current document)
   */
  ctx = function (o) {
      var defaultOptions = { width:500, height:500, enableMirroring : false}, options;

      //keep support for this way of calling C2S: new C2S(width,height)
      if (arguments.length > 1) {
          options = defaultOptions;
          options.width = arguments[0];
          options.height = arguments[1];
      } else if ( !o ) {
          options = defaultOptions;
      } else {
          options = o;
      }

      if (!(this instanceof ctx)) {
          //did someone call this without new?
          return new ctx(options);
      }

      //setup options
      this.width = options.width || defaultOptions.width;
      this.height = options.height || defaultOptions.height;
      this.enableMirroring = options.enableMirroring !== undefined ? options.enableMirroring : defaultOptions.enableMirroring;

      this.canvas = this;   ///point back to this instance!
      this.__document = options.document || document;

      // allow passing in an existing context to wrap around
      // if a context is passed in, we know a canvas already exist
      if (options.ctx) {
          this.__ctx = options.ctx;
      } else {
          this.__canvas = this.__document.createElement("canvas");
          this.__ctx = this.__canvas.getContext("2d");
      }

      this.__setDefaultStyles();
      this.__stack = [this.__getStyleState()];
      this.__groupStack = [];

      //the root svg element
      this.__root = this.__document.createElementNS("http://www.w3.org/2000/svg", "svg");
      this.__root.setAttribute("version", 1.1);
      this.__root.setAttribute("xmlns", "http://www.w3.org/2000/svg");
      this.__root.setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns:xlink", "http://www.w3.org/1999/xlink");
      this.__root.setAttribute("width", this.width);
      this.__root.setAttribute("height", this.height);

      //make sure we don't generate the same ids in defs
      this.__ids = {};

      //defs tag
      this.__defs = this.__document.createElementNS("http://www.w3.org/2000/svg", "defs");
      this.__root.appendChild(this.__defs);

      //also add a group child. the svg element can't use the transform attribute
      this.__currentElement = this.__document.createElementNS("http://www.w3.org/2000/svg", "g");
      this.__root.appendChild(this.__currentElement);
  };


  /**
   * Creates the specified svg element
   * @private
   */
  ctx.prototype.__createElement = function (elementName, properties, resetFill) {
      if (typeof properties === "undefined") {
          properties = {};
      }

      var element = this.__document.createElementNS("http://www.w3.org/2000/svg", elementName),
          keys = Object.keys(properties), i, key;
      if (resetFill) {
          //if fill or stroke is not specified, the svg element should not display. By default SVG's fill is black.
          element.setAttribute("fill", "none");
          element.setAttribute("stroke", "none");
      }
      for (i=0; i<keys.length; i++) {
          key = keys[i];
          element.setAttribute(key, properties[key]);
      }
      return element;
  };

  /**
   * Applies default canvas styles to the context
   * @private
   */
  ctx.prototype.__setDefaultStyles = function () {
      //default 2d canvas context properties see:http://www.w3.org/TR/2dcontext/
      var keys = Object.keys(STYLES), i, key;
      for (i=0; i<keys.length; i++) {
          key = keys[i];
          this[key] = STYLES[key].canvas;
      }
  };

  /**
   * Applies styles on restore
   * @param styleState
   * @private
   */
  ctx.prototype.__applyStyleState = function (styleState) {
      var keys = Object.keys(styleState), i, key;
      for (i=0; i<keys.length; i++) {
          key = keys[i];
          this[key] = styleState[key];
      }
  };

  /**
   * Gets the current style state
   * @return {Object}
   * @private
   */
  ctx.prototype.__getStyleState = function () {
      var i, styleState = {}, keys = Object.keys(STYLES), key;
      for (i=0; i<keys.length; i++) {
          key = keys[i];
          styleState[key] = this[key];
      }
      return styleState;
  };

  /**
   * Apples the current styles to the current SVG element. On "ctx.fill" or "ctx.stroke"
   * @param type
   * @private
   */
  ctx.prototype.__applyStyleToCurrentElement = function (type) {
    var currentElement = this.__currentElement;
    var currentStyleGroup = this.__currentElementsToStyle;
    if (currentStyleGroup) {
      currentElement.setAttribute(type, "");
      currentElement = currentStyleGroup.element;
      currentStyleGroup.children.forEach(function (node) {
        node.setAttribute(type, "");
      })
    }

      var keys = Object.keys(STYLES), i, style, value, id, regex, matches;
      for (i = 0; i < keys.length; i++) {
          style = STYLES[keys[i]];
          value = this[keys[i]];
          if (style.apply) {
              //is this a gradient or pattern?
              if (value instanceof CanvasPattern) {
                  //pattern
                  if (value.__ctx) {
                      //copy over defs
                      while(value.__ctx.__defs.childNodes.length) {
                          id = value.__ctx.__defs.childNodes[0].getAttribute("id");
                          this.__ids[id] = id;
                          this.__defs.appendChild(value.__ctx.__defs.childNodes[0]);
                      }
                  }
                  currentElement.setAttribute(style.apply, format("url(#{id})", {id:value.__root.getAttribute("id")}));
              }
              else if (value instanceof CanvasGradient) {
                  //gradient
                  currentElement.setAttribute(style.apply, format("url(#{id})", {id:value.__root.getAttribute("id")}));
              } else if (style.apply.indexOf(type)!==-1 && style.svg !== value) {
                  if ((style.svgAttr === "stroke" || style.svgAttr === "fill") && value.indexOf("rgba") !== -1) {
                      //separate alpha value, since illustrator can't handle it
                      regex = /rgba\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d?\.?\d*)\s*\)/gi;
                      matches = regex.exec(value);
                      currentElement.setAttribute(style.svgAttr, format("rgb({r},{g},{b})", {r:matches[1], g:matches[2], b:matches[3]}));
                      //should take globalAlpha here
                      var opacity = matches[4];
                      var globalAlpha = this.globalAlpha;
                      if (globalAlpha != null) {
                          opacity *= globalAlpha;
                      }
                      currentElement.setAttribute(style.svgAttr+"-opacity", opacity);
                  } else {
                      var attr = style.svgAttr;
                      if (keys[i] === 'globalAlpha') {
                          attr = type+'-'+style.svgAttr;
                          if (currentElement.getAttribute(attr)) {
                               //fill-opacity or stroke-opacity has already been set by stroke or fill.
                              continue;
                          }
                      }
                      //otherwise only update attribute if right type, and not svg default
                      currentElement.setAttribute(attr, value);
                  }
              }
          }
      }
  };

  /**
   * Will return the closest group or svg node. May return the current element.
   * @private
   */
  ctx.prototype.__closestGroupOrSvg = function (node) {
      node = node || this.__currentElement;
      if (node.nodeName === "g" || node.nodeName === "svg") {
          return node;
      } else {
          return this.__closestGroupOrSvg(node.parentNode);
      }
  };

  /**
   * Returns the serialized value of the svg so far
   * @param fixNamedEntities - Standalone SVG doesn't support named entities, which document.createTextNode encodes.
   *                           If true, we attempt to find all named entities and encode it as a numeric entity.
   * @return serialized svg
   */
  ctx.prototype.getSerializedSvg = function (fixNamedEntities) {
      var serialized = new XMLSerializer().serializeToString(this.__root),
          keys, i, key, value, regexp, xmlns;

      //IE search for a duplicate xmnls because they didn't implement setAttributeNS correctly
      xmlns = /xmlns="http:\/\/www\.w3\.org\/2000\/svg".+xmlns="http:\/\/www\.w3\.org\/2000\/svg/gi;
      if (xmlns.test(serialized)) {
          serialized = serialized.replace('xmlns="http://www.w3.org/2000/svg','xmlns:xlink="http://www.w3.org/1999/xlink');
      }

      if (fixNamedEntities) {
          keys = Object.keys(namedEntities);
          //loop over each named entity and replace with the proper equivalent.
          for (i=0; i<keys.length; i++) {
              key = keys[i];
              value = namedEntities[key];
              regexp = new RegExp(key, "gi");
              if (regexp.test(serialized)) {
                  serialized = serialized.replace(regexp, value);
              }
          }
      }

      return serialized;
  };


  /**
   * Returns the root svg
   * @return
   */
  ctx.prototype.getSvg = function () {
      return this.__root;
  };
  /**
   * Will generate a group tag.
   */
  ctx.prototype.save = function () {
      var group = this.__createElement("g");
      var parent = this.__closestGroupOrSvg();
      this.__groupStack.push(parent);
      parent.appendChild(group);
      this.__currentElement = group;
      this.__stack.push(this.__getStyleState());
  };
  /**
   * Sets current element to parent, or just root if already root
   */
  ctx.prototype.restore = function () {
      this.__currentElement = this.__groupStack.pop();
      this.__currentElementsToStyle = null;
      //Clearing canvas will make the poped group invalid, currentElement is set to the root group node.
      if (!this.__currentElement) {
          this.__currentElement = this.__root.childNodes[1];
      }
      var state = this.__stack.pop();
      this.__applyStyleState(state);
  };

  /**
   * Helper method to add transform
   * @private
   */
  ctx.prototype.__addTransform = function (t) {
      //if the current element has siblings, add another group
    var parent = this.__closestGroupOrSvg();
      if (parent.childNodes.length > 0) {
        if (this.__currentElement.nodeName === "path") {
          if (!this.__currentElementsToStyle) this.__currentElementsToStyle = {element: parent, children: []};
          this.__currentElementsToStyle.children.push(this.__currentElement)
          this.__applyCurrentDefaultPath();
        }

          var group = this.__createElement("g");
          parent.appendChild(group);
          this.__currentElement = group;
      }

      var transform = this.__currentElement.getAttribute("transform");
      if (transform) {
          transform += " ";
      } else {
          transform = "";
      }
      transform += t;
      this.__currentElement.setAttribute("transform", transform);
  };

  /**
   *  scales the current element
   */
  ctx.prototype.scale = function (x, y) {
      if (y === undefined) {
          y = x;
      }
      this.__addTransform(format("scale({x},{y})", {x:x, y:y}));
  };

  /**
   * rotates the current element
   */
  ctx.prototype.rotate = function (angle) {
      var degrees = (angle * 180 / Math.PI);
      this.__addTransform(format("rotate({angle},{cx},{cy})", {angle:degrees, cx:0, cy:0}));
  };

  /**
   * translates the current element
   */
  ctx.prototype.translate = function (x, y) {
      this.__addTransform(format("translate({x},{y})", {x:x,y:y}));
  };

  /**
   * applies a transform to the current element
   */
  ctx.prototype.transform = function (a, b, c, d, e, f) {
      this.__addTransform(format("matrix({a},{b},{c},{d},{e},{f})", {a:a, b:b, c:c, d:d, e:e, f:f}));
  };

  /**
   * Create a new Path Element
   */
  ctx.prototype.beginPath = function () {
      var path, parent;

      // Note that there is only one current default path, it is not part of the drawing state.
      // See also: https://html.spec.whatwg.org/multipage/scripting.html#current-default-path
      this.__currentDefaultPath = "";
      this.__currentPosition = {};

      path = this.__createElement("path", {}, true);
      parent = this.__closestGroupOrSvg();
      parent.appendChild(path);
      this.__currentElement = path;
  };

  /**
   * Helper function to apply currentDefaultPath to current path element
   * @private
   */
  ctx.prototype.__applyCurrentDefaultPath = function () {
    var currentElement = this.__currentElement;
      if (currentElement.nodeName === "path") {
    currentElement.setAttribute("d", this.__currentDefaultPath);
      } else {
    console.error("Attempted to apply path command to node", currentElement.nodeName);
      }
  };

  /**
   * Helper function to add path command
   * @private
   */
  ctx.prototype.__addPathCommand = function (command) {
      this.__currentDefaultPath += " ";
      this.__currentDefaultPath += command;
  };

  /**
   * Adds the move command to the current path element,
   * if the currentPathElement is not empty create a new path element
   */
  ctx.prototype.moveTo = function (x,y) {
      if (this.__currentElement.nodeName !== "path") {
          this.beginPath();
      }

      // creates a new subpath with the given point
      this.__currentPosition = {x: x, y: y};
      this.__addPathCommand(format("M {x} {y}", {x:x, y:y}));
  };

  /**
   * Closes the current path
   */
  ctx.prototype.closePath = function () {
      if (this.__currentDefaultPath) {
          this.__addPathCommand("Z");
      }
  };

  /**
   * Adds a line to command
   */
  ctx.prototype.lineTo = function (x, y) {
      this.__currentPosition = {x: x, y: y};
      if (this.__currentDefaultPath.indexOf('M') > -1) {
          this.__addPathCommand(format("L {x} {y}", {x:x, y:y}));
      } else {
          this.__addPathCommand(format("M {x} {y}", {x:x, y:y}));
      }
  };

  /**
   * Add a bezier command
   */
  ctx.prototype.bezierCurveTo = function (cp1x, cp1y, cp2x, cp2y, x, y) {
      this.__currentPosition = {x: x, y: y};
      this.__addPathCommand(format("C {cp1x} {cp1y} {cp2x} {cp2y} {x} {y}",
          {cp1x:cp1x, cp1y:cp1y, cp2x:cp2x, cp2y:cp2y, x:x, y:y}));
  };

  /**
   * Adds a quadratic curve to command
   */
  ctx.prototype.quadraticCurveTo = function (cpx, cpy, x, y) {
      this.__currentPosition = {x: x, y: y};
      this.__addPathCommand(format("Q {cpx} {cpy} {x} {y}", {cpx:cpx, cpy:cpy, x:x, y:y}));
  };


  /**
   * Return a new normalized vector of given vector
   */
  var normalize = function (vector) {
      var len = Math.sqrt(vector[0] * vector[0] + vector[1] * vector[1]);
      return [vector[0] / len, vector[1] / len];
  };

  /**
   * Adds the arcTo to the current path
   *
   * @see http://www.w3.org/TR/2015/WD-2dcontext-20150514/#dom-context-2d-arcto
   */
  ctx.prototype.arcTo = function (x1, y1, x2, y2, radius) {
      // Let the point (x0, y0) be the last point in the subpath.
      var x0 = this.__currentPosition && this.__currentPosition.x;
      var y0 = this.__currentPosition && this.__currentPosition.y;

      // First ensure there is a subpath for (x1, y1).
      if (typeof x0 == "undefined" || typeof y0 == "undefined") {
          return;
      }

      // Negative values for radius must cause the implementation to throw an IndexSizeError exception.
      if (radius < 0) {
          throw new Error("IndexSizeError: The radius provided (" + radius + ") is negative.");
      }

      // If the point (x0, y0) is equal to the point (x1, y1),
      // or if the point (x1, y1) is equal to the point (x2, y2),
      // or if the radius radius is zero,
      // then the method must add the point (x1, y1) to the subpath,
      // and connect that point to the previous point (x0, y0) by a straight line.
      if (((x0 === x1) && (y0 === y1))
          || ((x1 === x2) && (y1 === y2))
          || (radius === 0)) {
          this.lineTo(x1, y1);
          return;
      }

      // Otherwise, if the points (x0, y0), (x1, y1), and (x2, y2) all lie on a single straight line,
      // then the method must add the point (x1, y1) to the subpath,
      // and connect that point to the previous point (x0, y0) by a straight line.
      var unit_vec_p1_p0 = normalize([x0 - x1, y0 - y1]);
      var unit_vec_p1_p2 = normalize([x2 - x1, y2 - y1]);
      if (unit_vec_p1_p0[0] * unit_vec_p1_p2[1] === unit_vec_p1_p0[1] * unit_vec_p1_p2[0]) {
          this.lineTo(x1, y1);
          return;
      }

      // Otherwise, let The Arc be the shortest arc given by circumference of the circle that has radius radius,
      // and that has one point tangent to the half-infinite line that crosses the point (x0, y0) and ends at the point (x1, y1),
      // and that has a different point tangent to the half-infinite line that ends at the point (x1, y1), and crosses the point (x2, y2).
      // The points at which this circle touches these two lines are called the start and end tangent points respectively.

      // note that both vectors are unit vectors, so the length is 1
      var cos = (unit_vec_p1_p0[0] * unit_vec_p1_p2[0] + unit_vec_p1_p0[1] * unit_vec_p1_p2[1]);
      var theta = Math.acos(Math.abs(cos));

      // Calculate origin
      var unit_vec_p1_origin = normalize([
          unit_vec_p1_p0[0] + unit_vec_p1_p2[0],
          unit_vec_p1_p0[1] + unit_vec_p1_p2[1]
      ]);
      var len_p1_origin = radius / Math.sin(theta / 2);
      var x = x1 + len_p1_origin * unit_vec_p1_origin[0];
      var y = y1 + len_p1_origin * unit_vec_p1_origin[1];

      // Calculate start angle and end angle
      // rotate 90deg clockwise (note that y axis points to its down)
      var unit_vec_origin_start_tangent = [
          -unit_vec_p1_p0[1],
          unit_vec_p1_p0[0]
      ];
      // rotate 90deg counter clockwise (note that y axis points to its down)
      var unit_vec_origin_end_tangent = [
          unit_vec_p1_p2[1],
          -unit_vec_p1_p2[0]
      ];
      var getAngle = function (vector) {
          // get angle (clockwise) between vector and (1, 0)
          var x = vector[0];
          var y = vector[1];
          if (y >= 0) { // note that y axis points to its down
              return Math.acos(x);
          } else {
              return -Math.acos(x);
          }
      };
      var startAngle = getAngle(unit_vec_origin_start_tangent);
      var endAngle = getAngle(unit_vec_origin_end_tangent);

      // Connect the point (x0, y0) to the start tangent point by a straight line
      this.lineTo(x + unit_vec_origin_start_tangent[0] * radius,
                  y + unit_vec_origin_start_tangent[1] * radius);

      // Connect the start tangent point to the end tangent point by arc
      // and adding the end tangent point to the subpath.
      this.arc(x, y, radius, startAngle, endAngle);
  };

  /**
   * Sets the stroke property on the current element
   */
  ctx.prototype.stroke = function () {
      if (this.__currentElement.nodeName === "path") {
          this.__currentElement.setAttribute("paint-order", "fill stroke markers");
      }
      this.__applyCurrentDefaultPath();
      this.__applyStyleToCurrentElement("stroke");
  };

  /**
   * Sets fill properties on the current element
   */
  ctx.prototype.fill = function () {
      if (this.__currentElement.nodeName === "path") {
          this.__currentElement.setAttribute("paint-order", "stroke fill markers");
      }
      this.__applyCurrentDefaultPath();
      this.__applyStyleToCurrentElement("fill");
  };

  /**
   *  Adds a rectangle to the path.
   */
  ctx.prototype.rect = function (x, y, width, height) {
      if (this.__currentElement.nodeName !== "path") {
          this.beginPath();
      }
      this.moveTo(x, y);
      this.lineTo(x+width, y);
      this.lineTo(x+width, y+height);
      this.lineTo(x, y+height);
      this.lineTo(x, y);
      this.closePath();
  };


  /**
   * adds a rectangle element
   */
  ctx.prototype.fillRect = function (x, y, width, height) {
      var rect, parent;
      rect = this.__createElement("rect", {
          x : x,
          y : y,
          width : width,
          height : height
      }, true);
      parent = this.__closestGroupOrSvg();
      parent.appendChild(rect);
      this.__currentElement = rect;
      this.__applyStyleToCurrentElement("fill");
  };

  /**
   * Draws a rectangle with no fill
   * @param x
   * @param y
   * @param width
   * @param height
   */
  ctx.prototype.strokeRect = function (x, y, width, height) {
      var rect, parent;
      rect = this.__createElement("rect", {
          x : x,
          y : y,
          width : width,
          height : height
      }, true);
      parent = this.__closestGroupOrSvg();
      parent.appendChild(rect);
      this.__currentElement = rect;
      this.__applyStyleToCurrentElement("stroke");
  };


  /**
   * Clear entire canvas:
   * 1. save current transforms
   * 2. remove all the childNodes of the root g element
   */
  ctx.prototype.__clearCanvas = function () {
      var current = this.__closestGroupOrSvg(),
          transform = current.getAttribute("transform");
      var rootGroup = this.__root.childNodes[1];
      var childNodes = rootGroup.childNodes;
      for (var i = childNodes.length - 1; i >= 0; i--) {
          if (childNodes[i]) {
              rootGroup.removeChild(childNodes[i]);
          }
      }
      this.__currentElement = rootGroup;
      //reset __groupStack as all the child group nodes are all removed.
      this.__groupStack = [];
      if (transform) {
          this.__addTransform(transform);
      }
  };

  /**
   * "Clears" a canvas by just drawing a white rectangle in the current group.
   */
  ctx.prototype.clearRect = function (x, y, width, height) {
      //clear entire canvas
      if (x === 0 && y === 0 && width === this.width && height === this.height) {
          this.__clearCanvas();
          return;
      }
      var rect, parent = this.__closestGroupOrSvg();
      rect = this.__createElement("rect", {
          x : x,
          y : y,
          width : width,
          height : height,
          fill : "#FFFFFF"
      }, true);
      parent.appendChild(rect);
  };

  /**
   * Adds a linear gradient to a defs tag.
   * Returns a canvas gradient object that has a reference to it's parent def
   */
  ctx.prototype.createLinearGradient = function (x1, y1, x2, y2) {
      var grad = this.__createElement("linearGradient", {
          id : randomString(this.__ids),
          x1 : x1+"px",
          x2 : x2+"px",
          y1 : y1+"px",
          y2 : y2+"px",
          "gradientUnits" : "userSpaceOnUse"
      }, false);
      this.__defs.appendChild(grad);
      return new CanvasGradient(grad, this);
  };

  /**
   * Adds a radial gradient to a defs tag.
   * Returns a canvas gradient object that has a reference to it's parent def
   */
  ctx.prototype.createRadialGradient = function (x0, y0, r0, x1, y1, r1) {
      var grad = this.__createElement("radialGradient", {
          id : randomString(this.__ids),
          cx : x1+"px",
          cy : y1+"px",
          r  : r1+"px",
          fx : x0+"px",
          fy : y0+"px",
          "gradientUnits" : "userSpaceOnUse"
      }, false);
      this.__defs.appendChild(grad);
      return new CanvasGradient(grad, this);

  };

  /**
   * Parses the font string and returns svg mapping
   * @private
   */
  ctx.prototype.__parseFont = function () {
    
     
    var fontPart = this.font.split(' ') || [];
    if (fontPart[3] && fontPart[3].indexOf('/') > -1) {
      fontPart[3] = fontPart[3].split('/')[0];
    }
    var family = '';
    for (var i = 4; i < fontPart.length; ++i) {
      family += fontPart[i] + ' ';
    }

    if (fontPart.length === 2) {
      family = fontPart[1];
      fontPart = ['normal',  'normal', 'normal', fontPart[0]];        
    }
    
      var data = {
          style : fontPart[0] || 'normal',
          size : fontPart[3] || '12px',
          family :family || 'Arial',
          weight: fontPart[2] || 'normal',
          decoration : fontPart[1] || 'normal',
          href : null
      };

      //canvas doesn't support underline natively, but we can pass this attribute
      if (this.__fontUnderline === "underline") {
          data.decoration = "underline";
      }

      //canvas also doesn't support linking, but we can pass this as well
      if (this.__fontHref) {
          data.href = this.__fontHref;
      }

      return data;
  };

  /**
   * Helper to link text fragments
   * @param font
   * @param element
   * @return {*}
   * @private
   */
  ctx.prototype.__wrapTextLink = function (font, element) {
      if (font.href) {
          var a = this.__createElement("a");
          a.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", font.href);
          a.appendChild(element);
          return a;
      }
      return element;
  };

  /**
   * Fills or strokes text
   * @param text
   * @param x
   * @param y
   * @param action - stroke or fill
   * @private
   */
  ctx.prototype.__applyText = function (text, x, y, action) {
      var font = this.__parseFont(),
          parent = this.__closestGroupOrSvg(),
          textElement = this.__createElement("text", {
              "font-family" : font.family,
              "font-size" : font.size,
              "font-style" : font.style,
              "font-weight" : font.weight,
              "text-decoration" : font.decoration,
              "x" : x,
              "y" : y,
              "text-anchor": getTextAnchor(this.textAlign),
              "dominant-baseline": getDominantBaseline(this.textBaseline)
          }, true);


    if (font.family === 'topology') {        
      text = '--le5le--'+ (+text.charCodeAt()).toString(16)+ ';';
    }
      textElement.appendChild(this.__document.createTextNode(text));
      this.__currentElement = textElement;
      this.__applyStyleToCurrentElement(action);
      parent.appendChild(this.__wrapTextLink(font,textElement));
  };

  /**
   * Creates a text element
   * @param text
   * @param x
   * @param y
   */
  ctx.prototype.fillText = function (text, x, y) {
      this.__applyText(text, x, y, "fill");
  };

  /**
   * Strokes text
   * @param text
   * @param x
   * @param y
   */
  ctx.prototype.strokeText = function (text, x, y) {
      this.__applyText(text, x, y, "stroke");
  };

  /**
   * No need to implement this for svg.
   * @param text
   * @return {TextMetrics}
   */
  ctx.prototype.measureText = function (text) {
      this.__ctx.font = this.font;
      return this.__ctx.measureText(text);
  };

  /**
   *  Arc command!
   */
  ctx.prototype.arc = function (x, y, radius, startAngle, endAngle, counterClockwise) {
      // in canvas no circle is drawn if no angle is provided.
      if (startAngle === endAngle) {
          return;
      }
    
      if (this.__currentElement.nodeName !== "path") {
        this.beginPath();
      }
    
      startAngle = startAngle % (2*Math.PI);
      endAngle = endAngle % (2*Math.PI);
      if (startAngle === endAngle) {
          //circle time! subtract some of the angle so svg is happy (svg elliptical arc can't draw a full circle)
          endAngle = ((endAngle + (2*Math.PI)) - 0.001 * (counterClockwise ? -1 : 1)) % (2*Math.PI);
      }
      var endX = x+radius*Math.cos(endAngle),
          endY = y+radius*Math.sin(endAngle),
          startX = x+radius*Math.cos(startAngle),
          startY = y+radius*Math.sin(startAngle),
          sweepFlag = counterClockwise ? 0 : 1,
          largeArcFlag = 0,
          diff = endAngle - startAngle;

      // https://github.com/gliffy/canvas2svg/issues/4
      if (diff < 0) {
          diff += 2*Math.PI;
      }

      if (counterClockwise) {
          largeArcFlag = diff > Math.PI ? 0 : 1;
      } else {
          largeArcFlag = diff > Math.PI ? 1 : 0;
      }

      this.lineTo(startX, startY);
      this.__addPathCommand(format("A {rx} {ry} {xAxisRotation} {largeArcFlag} {sweepFlag} {endX} {endY}",
          {rx:radius, ry:radius, xAxisRotation:0, largeArcFlag:largeArcFlag, sweepFlag:sweepFlag, endX:endX, endY:endY}));

      this.__currentPosition = {x: endX, y: endY};
  };

  /**
   * Generates a ClipPath from the clip command.
   */
  ctx.prototype.clip = function () {
      var group = this.__closestGroupOrSvg(),
          clipPath = this.__createElement("clipPath"),
          id =  randomString(this.__ids),
          newGroup = this.__createElement("g");

      this.__applyCurrentDefaultPath();
      group.removeChild(this.__currentElement);
      clipPath.setAttribute("id", id);
      clipPath.appendChild(this.__currentElement);

      this.__defs.appendChild(clipPath);

      //set the clip path to this group
      group.setAttribute("clip-path", format("url(#{id})", {id:id}));

      //clip paths can be scaled and transformed, we need to add another wrapper group to avoid later transformations
      // to this path
      group.appendChild(newGroup);

      this.__currentElement = newGroup;

  };

  /**
   * Draws a canvas, image or mock context to this canvas.
   * Note that all svg dom manipulation uses node.childNodes rather than node.children for IE support.
   * http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#dom-context-2d-drawimage
   */
  ctx.prototype.drawImage = function () {
      //convert arguments to a real array
      var args = Array.prototype.slice.call(arguments),
          image=args[0],
          dx, dy, dw, dh, sx=0, sy=0, sw, sh, parent, svg, defs, group,
          currentElement, svgImage, canvas, context, id;

      if (args.length === 3) {
          dx = args[1];
          dy = args[2];
          sw = image.width;
          sh = image.height;
          dw = sw;
          dh = sh;
      } else if (args.length === 5) {
          dx = args[1];
          dy = args[2];
          dw = args[3];
          dh = args[4];
          sw = image.width;
          sh = image.height;
      } else if (args.length === 9) {
          sx = args[1];
          sy = args[2];
          sw = args[3];
          sh = args[4];
          dx = args[5];
          dy = args[6];
          dw = args[7];
          dh = args[8];
      } else {
          throw new Error("Invalid number of arguments passed to drawImage: " + arguments.length);
      }

      parent = this.__closestGroupOrSvg();
      currentElement = this.__currentElement;
      var translateDirective = "translate(" + dx + ", " + dy + ")";
      if (image instanceof ctx) {
          //canvas2svg mock canvas context. In the future we may want to clone nodes instead.
          //also I'm currently ignoring dw, dh, sw, sh, sx, sy for a mock context.
          svg = image.getSvg().cloneNode(true);
          if (svg.childNodes && svg.childNodes.length > 1) {
              defs = svg.childNodes[0];
              while(defs.childNodes.length) {
                  id = defs.childNodes[0].getAttribute("id");
                  this.__ids[id] = id;
                  this.__defs.appendChild(defs.childNodes[0]);
              }
              group = svg.childNodes[1];
              if (group) {
                  //save original transform
                  var originTransform = group.getAttribute("transform");
                  var transformDirective;
                  if (originTransform) {
                      transformDirective = originTransform+" "+translateDirective;
                  } else {
                      transformDirective = translateDirective;
                  }
                  group.setAttribute("transform", transformDirective);
                  parent.appendChild(group);
              }
          }
      } else if (image.nodeName === "CANVAS" || image.nodeName === "IMG") {
          //canvas or image
          svgImage = this.__createElement("image");
          svgImage.setAttribute("width", dw);
          svgImage.setAttribute("height", dh);
          svgImage.setAttribute("preserveAspectRatio", "none");

          if (sx || sy || sw !== image.width || sh !== image.height) {
              //crop the image using a temporary canvas
              canvas = this.__document.createElement("canvas");
              canvas.width = dw;
              canvas.height = dh;
              context = canvas.getContext("2d");
              context.drawImage(image, sx, sy, sw, sh, 0, 0, dw, dh);
              image = canvas;
          }
          svgImage.setAttribute("transform", translateDirective);
          var imgSrc = image.getAttribute("src");
          if (imgSrc[0] === '/') {
            imgSrc = location.protocol + '//' + location.host + imgSrc;
          } 
          svgImage.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href",
              image.nodeName === "CANVAS" ? image.toDataURL() : imgSrc);
          parent.appendChild(svgImage);
      }
  };

  /**
   * Generates a pattern tag
   */
  ctx.prototype.createPattern = function (image, repetition) {
      var pattern = this.__document.createElementNS("http://www.w3.org/2000/svg", "pattern"), id = randomString(this.__ids),
          img;
      pattern.setAttribute("id", id);
      pattern.setAttribute("width", image.width);
      pattern.setAttribute("height", image.height);
      if (image.nodeName === "CANVAS" || image.nodeName === "IMG") {
          img = this.__document.createElementNS("http://www.w3.org/2000/svg", "image");
          img.setAttribute("width", image.width);
          img.setAttribute("height", image.height);
          img.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href",
              image.nodeName === "CANVAS" ? image.toDataURL() : image.getAttribute("src"));
          pattern.appendChild(img);
          this.__defs.appendChild(pattern);
      } else if (image instanceof ctx) {
          pattern.appendChild(image.__root.childNodes[1]);
          this.__defs.appendChild(pattern);
      }
      return new CanvasPattern(pattern, this);
  };

  ctx.prototype.setLineDash = function (dashArray) {
      if (dashArray && dashArray.length > 0) {
          this.lineDash = dashArray.join(",");
      } else {
          this.lineDash = null;
      }
  };

 /*
  * Ellipse command
  * @param x
  * @param y
  * @param radiusX
  * @param radiusY
  * @param startAngle
  * @param endAngle
  * @counterClockwise
  */
 ctx.prototype.ellipse = function(x, y, radiusX, radiusY, rotation, startAngle, endAngle, counterClockwise) {
  //ellipse is the same svg command as arc, but with a radiusX and radiusY instead of just radius
    if (startAngle === endAngle) {
        return;
    }
   
    if (this.__currentElement.nodeName !== "path") {
      this.beginPath();
    }
   
    startAngle = startAngle % (2*Math.PI);
    endAngle = endAngle % (2*Math.PI);
    if(startAngle === endAngle) {
        endAngle = ((endAngle + (2*Math.PI)) - 0.001 * (counterClockwise ? -1 : 1)) % (2*Math.PI);
    }
    var endX = x + Math.cos(-rotation) * radiusX * Math.cos(endAngle)
                 + Math.sin(-rotation) * radiusY * Math.sin(endAngle),
        endY = y - Math.sin(-rotation) * radiusX * Math.cos(endAngle)
                 + Math.cos(-rotation) * radiusY * Math.sin(endAngle),
        startX = x + Math.cos(-rotation) * radiusX * Math.cos(startAngle)
                   + Math.sin(-rotation) * radiusY * Math.sin(startAngle),
        startY = y - Math.sin(-rotation) * radiusX * Math.cos(startAngle)
                   + Math.cos(-rotation) * radiusY * Math.sin(startAngle),
        sweepFlag = counterClockwise ? 0 : 1,
        largeArcFlag = 0,
        diff = endAngle - startAngle;

    if(diff < 0) {
        diff += 2*Math.PI;
    }

    if(counterClockwise) {
        largeArcFlag = diff > Math.PI ? 0 : 1;
    } else {
        largeArcFlag = diff > Math.PI ? 1 : 0;
    }

    this.lineTo(startX, startY);
    this.__addPathCommand(format("A {rx} {ry} {xAxisRotation} {largeArcFlag} {sweepFlag} {endX} {endY}",
        {rx:radiusX, ry:radiusY, xAxisRotation:rotation*(180/Math.PI), largeArcFlag:largeArcFlag, sweepFlag:sweepFlag, endX:endX, endY:endY}));

    this.__currentPosition = {x: endX, y: endY};
};

  /**
   * Not yet implemented
   */
  ctx.prototype.drawFocusRing = function () {};
  ctx.prototype.createImageData = function () {};
  ctx.prototype.getImageData = function () {};
  ctx.prototype.putImageData = function () {};
  ctx.prototype.globalCompositeOperation = function () {};
  ctx.prototype.setTransform = function () {};

  //add options for alternative namespace
  if (typeof window === "object") {
      window.C2S = ctx;
  }

  // CommonJS/Browserify
  if (typeof module === "object" && typeof module.exports === "object") {
      module.exports = ctx;
  }

}());
